<template>
  <fieldset>
    <legend>tab切换</legend>
    <button v-for="(btn,index) in buttons" :key="index" :class="['tab-button',{active:btn===activeBtn}]" @click="activeBtn=btn">{{btn}}</button>
    <h1 :is="dynamic" class="tab">123456</h1>
  </fieldset>
</template>
    <script>
    // is属性可以用来切换
    import Email from "./Email.vue"
    import Mine from "./Mine.vue"
    import Charge from "./Charge.vue"
    import Home from "./Home.vue"
        export default{
            data(){
                return{
                    buttons:["Email","Mine","Charge","Home"],
                    activeBtn:"Email"
                }
            },
            computed:{
                dynamic(){
                    return "tab-" + this.activeBtn
                }
            },
            components: {
                "tab-Email":Email,
                "tab-Mine":Mine,
                "tab-Charge":Charge,
                "tab-Home":Home
            }
        }
    </script>

<style scoped>
.tab-button {
  padding: 6px 10px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border: 1px solid #ccc;
  cursor: pointer;
  background: #f0f0f0;
  margin-bottom: -1px;
  margin-right: -1px;
}

.tab-button:hover {
  background: #e0e0e0;
}

.tab-button.active {
  background: hotpink;
}

.tab {
  border: 1px solid #ccc;
  padding: 10px;
}
h1 {
  margin: 0;
}
</style>